<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>

		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<!-- 引入样式 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<!-- 引入组件库 -->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>

		<style>
			.a {
				height: 200px;
			}
			
			.b {
				border: 2px solid black;
			}
		</style>
	</head>

	<body>
		

		<div id="aaa">
			
			<el-button>按钮</el-button>
			
			
			欢迎你,{{username}}, {{baidu}} {{1+2}} {{a+b}}
			<span v-html="baidu"></span>

			<template v-if="age==10">
				10岁了
			</template>
			<template v-else-if="age==12">
				12岁
			</template>
			<template v-else>
				可以谈恋爱了...
			</template>

			<div v-for="g in girls">
				{{g}}
			</div>

			{{stu.age}}

			<template v-once>{{stu.age}}</template>

			<img v-bind:width="w+'px'" :src="img" @click="clikcimg(age,'b')" />
			<input v-model="user" placeholder="请输入用户名" />

			<div :style="{background: red,width:w+'px'}" :class="[c1,c2]">哈哈哈哈</div>

			<cbbb/>
			<ca/> .....

		</div>

		<div id="bbb">
			<ca></ca>
			<componentb></componentb>
		</div>

		<script>
			//局部组件
			var cb = {
				data: function() {
					return {
						name: "lxxx"
					}
				},
				template: "<a href='http://www.baidu.com'>{{name}}</a>"
			};

			//全局组件
			Vue.component("ca", {
				data: function() {
					return {
						name: "lx"
					}
				},
				template: "<div><a href='http://www.baidu.com'>{{name}}</a><span>ABCD</span></div>"
			});

			var v2 = new Vue({
				el: "#bbb",
				components: {
					"componentb": cb
				}
			});

			var v = new Vue({
				el: "#aaa",
				data: {
					username: "lx",
					baidu: "<a href='http://www.baidu.com'>百度</a>",
					a: 1,
					b: 10,
					age: 12,
					girls: ["凤姐", "如花", "静静", "小红"],
					stu: {
						age: 80,
						name: "fanjin"
					},
					w: 200,
					img: "img/WechatIMG112.jpeg",
					user: "lxx",
					red: 'red',
					c1: "a",
					c2: "b"
				},
				components: {
					"cbbb": cb
				},
				methods: {
					clikcimg: function(x, y) {
						alert("点击了图片" + this.user + "," + x + "," + y)
						this.red = "green";
						this.w = 300
					}
				}
			})
		</script>
	</body>

</html>